<template>
  <Crumbs
    :crumbName="[
      {
        route: '',
        name: '轮播图管理',
      },
    ]"
  />
  <a-card style="min-height: 90%">
    <div class="query border">
      <a-row>
        <a-col :span="12">
          <a-row>
            <a-col :span="5" class="right">
              <span>日期查询：</span>
            </a-col>
            <a-col :span="19">
              <a-space direction="vertical" :size="12">
                <a-range-picker
                  v-model:value="datetime"
                  :locale="locale"
                  show-time
                />
              </a-space>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="8" :offset="2">
          <a-row>
            <a-col :span="6">
              <a-button type="primary" @click="queryCarousel">查询</a-button>
            </a-col>
            <a-col :span="6">
              <a-button @click="handleReset">重置</a-button>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="table border">
      <a-page-header title="数据列表">
        <template #extra>
          <a-popover
            v-if="
              this.$store.state.userStore.userInfos?.role_id === 3 ||
              this.$store.state.userStore.userInfos?.status == 'false'
            "
          >
            <template #content>
              <p>暂无权限</p>
            </template>
            <a-button disabled type="primary">添加数据</a-button>
          </a-popover>
          <a-button
            v-else
            class="pass-btn"
            type="primary"
            @click="handleShowAddModal"
            >添加数据</a-button
          >
          <a-modal
            v-model:visible="addVisible"
            title="添加轮播图数据"
            ok-text="确认"
            cancel-text="取消"
            :afterClose="addCloselModal"
            @ok="handleAddOk"
          >
            <a-form :model="addModel" :rules="fromRules" ref="addFormRef">
              <a-form-item
                has-feedback
                :labelCol="{ span: 4, offset: 1 }"
                :wrapperCol="{ span: 18 }"
                label="轮播图片"
                name="swipe_image"
              >
                <a-upload
                  v-model:file-list="addModel.swipe_image"
                  name="file"
                  action="http://127.0.0.1:3000/upload"
                  list-type="picture"
                  :beforeUpload="beforeUpload"
                  @change="handleChange"
                >
                  <a-button>
                    <upload-outlined></upload-outlined>点击上传
                  </a-button>
                </a-upload>
              </a-form-item>
              <a-form-item
                has-feedback
                :labelCol="{ span: 4, offset: 1 }"
                :wrapperCol="{ span: 18 }"
                label="展示时间"
                name="datetime"
              >
                <a-space direction="vertical" :size="12">
                  <a-range-picker
                    v-model:value="addModel.datetime"
                    :locale="locale"
                    show-time
                  />
                </a-space>
              </a-form-item>
              <a-form-item
                has-feedback
                :labelCol="{ span: 4, offset: 1 }"
                :wrapperCol="{ span: 18 }"
                label="跳转地址"
                name="operate_place"
              >
                <a-input
                  v-model:value="addModel.operate_place"
                  placeholder="请填写宠物类别"
                />
              </a-form-item>
              <a-form-item
                has-feedback
                :labelCol="{ span: 4, offset: 1 }"
                :wrapperCol="{ span: 18 }"
                label="轮播状态"
                name="status"
              >
                <a-select
                  v-model:value="addModel.status"
                  :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                >
                  <a-select-option value="展示中">展示中</a-select-option>
                  <a-select-option value="未开始">未开始</a-select-option>
                  <a-select-option value="已结束">已结束</a-select-option>
                </a-select>
              </a-form-item>
            </a-form>
          </a-modal>
        </template>
      </a-page-header>
      <a-table
        bordered
        :pagination="false"
        :columns="columns"
        :data-source="data"
        :scroll="{ x: 1800 }"
        rowKey="id"
      >
        <template #operation="{ record }">
          <a-popover
            v-if="
              this.$store.state.userStore.userInfos?.role_id === 3 ||
              this.$store.state.userStore.userInfos?.status == 'false'
            "
          >
            <template #content>
              <p>暂无权限</p>
            </template>
            <a-button
              disabled
              size="small"
              type="primary"
              style="margin-right: 10px"
              >编辑</a-button
            >
          </a-popover>
          <a-button
            v-else
            size="small"
            type="primary"
            style="margin-right: 10px"
            @click="handleShowEditModal(record.id)"
            >编辑</a-button
          >
          <a-popover
            v-if="
              this.$store.state.userStore.userInfos?.role_id === 3 ||
              this.$store.state.userStore.userInfos?.status == 'false'
            "
          >
            <template #content>
              <p>暂无权限</p>
            </template>
            <a-button disabled size="small" type="primary">删除</a-button>
          </a-popover>
          <a-popconfirm
            v-else
            title="此操作将永久删除该用户, 是否继续?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="delCarousel(record.id)"
            @cancel="cancelDel"
          >
            <a-button size="small" type="primary" danger>删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
      <a-modal
        v-model:visible="editVisible"
        title="编辑轮播图数据"
        ok-text="确认"
        cancel-text="取消"
        :afterClose="editCloselModal"
        @ok="handleEditOk"
      >
        <a-form :model="editModel" :rules="fromRules" ref="editFormRef">
          <a-form-item
            has-feedback
            :labelCol="{ span: 4, offset: 1 }"
            :wrapperCol="{ span: 18 }"
            label="轮播图片"
            name="swipe_image"
          >
            <a-upload
              v-model:file-list="editModel.swipe_image"
              name="file"
              action="http://127.0.0.1:3000/upload"
              list-type="picture"
              :beforeUpload="beforeEditUpload"
              @change="handleEditChange"
            >
              <a-button> <upload-outlined></upload-outlined>点击上传 </a-button>
            </a-upload>
          </a-form-item>
          <a-form-item
            has-feedback
            :labelCol="{ span: 4, offset: 1 }"
            :wrapperCol="{ span: 18 }"
            label="展示时间"
            name="datetime"
          >
            <a-space direction="vertical" :size="12">
              <a-range-picker
                v-model:value="editModel.datetime"
                :locale="locale"
                show-time
              />
            </a-space>
          </a-form-item>
          <a-form-item
            has-feedback
            :labelCol="{ span: 4, offset: 1 }"
            :wrapperCol="{ span: 18 }"
            label="跳转地址"
            name="operate_place"
          >
            <a-input
              v-model:value="editModel.operate_place"
              placeholder="请填写宠物类别"
            />
          </a-form-item>
          <a-form-item
            has-feedback
            :labelCol="{ span: 4, offset: 1 }"
            :wrapperCol="{ span: 18 }"
            label="轮播状态"
            name="status"
          >
            <a-select
              v-model:value="editModel.status"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
            >
              <a-select-option value="展示中">展示中</a-select-option>
              <a-select-option value="未开始">未开始</a-select-option>
              <a-select-option value="已结束">已结束</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </a-card>
</template>

<script>
// 导入组件
import Crumbs from "@/components/Crumbs";
// 导入国际化语言配置
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
// 导入轮播图列表
import { useCarouselDataList } from "./useCarouselDataList";
// 导入查询轮播图方法
import { useQueryCarousel } from "./useQueryCarousel";
// 导入表单校验规则
import { useFormRules } from "./useFormRules";
// 导入添加轮播图方法
import { useAddCarousel } from "./useAddCarousel";
// 导入删除轮播图方法
import { useDelCarousel } from "./useDelCarousel";
// 导入图标
import { UploadOutlined } from "@ant-design/icons-vue";
// 导入上传方法
import { useUpload } from "./useUpload";
// 导入编辑轮播图方法
import { useEditCarousel } from "./useEditCarousel";
import { useEditUpload } from "./useEditUpload";

export default {
  name: "",
  components: {
    Crumbs,
    UploadOutlined,
  },
  setup() {
    // 表格列
    const { columns, data, getCarouselData } = useCarouselDataList();

    // 查询轮播图列表
    const { datetime, queryCarousel, handleReset } = useQueryCarousel(
      data,
      getCarouselData
    );

    // 校验规则
    const { fromRules } = useFormRules();

    // 添加轮播图
    const {
      addVisible,
      handleShowAddModal,
      addModel,
      swipe_image_src,
      addFormRef,
      addCloselModal,
      handleAddOk,
    } = useAddCarousel(getCarouselData);

    // 删除轮播图
    const { cancelDel, delCarousel } = useDelCarousel(getCarouselData);

    // 图片上传
    const { handleChange, beforeUpload } = useUpload(addModel, swipe_image_src);

    // 编辑轮播图
    const {
      editVisible,
      editModel,
      save_swipe_image,
      handleShowEditModal,
      editFormRef,
      editCloselModal,
      handleEditOk,
    } = useEditCarousel(getCarouselData);

    // 编辑轮播图中的图片上传
    const { handleEditChange, beforeEditUpload } = useEditUpload(
      editModel,
      save_swipe_image
    );

    return {
      locale, // 国际化语言配置
      columns, // 列配置
      data, // 数据
      datetime, // 日期选择存储
      queryCarousel, // 查询轮播图列表方法
      handleReset, // 重置方法
      fromRules, // 校验规则
      addVisible, // 添加轮播图框显示状态
      handleShowAddModal, // 点击添加轮播图显示添加用户框
      addModel, // 添加表单内容
      addFormRef, // 表单ref
      addCloselModal, // 关闭模态框
      handleAddOk, // 点击确认
      cancelDel, // 取消气泡框
      delCarousel, // 删除轮播图方法
      handleChange, // 上传文件改变时的状态
      beforeUpload, // 上传文件之前的钩子
      editVisible, // 编辑轮播图框显示状态
      editModel, // 编辑表单内容
      handleShowEditModal, // 点击编辑轮播图显示添加用户框
      editFormRef, // 表单ref
      editCloselModal, // 关闭模态框
      handleEditOk, // 点击确认
      handleEditChange, // 编辑轮播图中上传文件改变时的状态
      beforeEditUpload, // 编辑轮播图中上传文件之前的钩子
    };
  },
};
</script>
<style scoped lang="less">
.query {
  height: 100px;
  margin-bottom: 15px;
  > .ant-row {
    margin-top: 30px;
    line-height: 40px;
  }
  span {
    font-size: 12px;
  }
  .right {
    text-align: right;
    span {
      font-size: 13px;
    }
  }
}
.table {
  .ant-table-wrapper {
    padding: 16px;
  }
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    height: 18px;
    cursor: pointer;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
    border-radius: 20px;
    background: #fdeb71;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: #f8d800;
  }
}
.border {
  border: 1px solid #ddd;
}
.ant-page-header {
  border-bottom: none !important;
}
</style>
